<template>
  <div>
    <bar>
      <item path="/home">
        <img slot="item_off" src="../../../assets/img/tabbar/home.svg">
        <img slot="item_on" src="../../../assets/img/tabbar/home_active.svg">
        <div slot="item_name">首页</div>
      </item>

      <item path="/category">
        <img slot="item_off" src="../../../assets/img/tabbar/category.svg">
        <img slot="item_on" src="../../../assets/img/tabbar/category_active.svg">
        <div slot="item_name">分类</div>
      </item>

      <item path="/shopcart">
        <img slot="item_off" src="../../../assets/img/tabbar/shopcart.svg">
        <img slot="item_on" src="../../../assets/img/tabbar/shopcart_active.svg">
        <div slot="item_name">购物车</div>
      </item>

      <item path="/profile">
        <img slot="item_off" src="../../../assets/img/tabbar/profile.svg">
        <img slot="item_on" src="../../../assets/img/tabbar/profile_active.svg">
        <div slot="item_name">我的</div>
      </item>
    </bar>
  </div>
</template>

<script>
  import bar from '../../common/tabbar/bar'
  import item from '../../common/tabbar/item'
  export default {
    name: "maintabbar",
    components:{
      bar,
      item
    }
  }
</script>

<style scoped>
</style>
